<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>首页</title>
	</head>

	<body class="index">
		<!-- 主体部分 -->
		<main class="main">
			<!-- 横幅轮播图 -->
			<div class="swiper">
				<div class="swiper-wrapper">
					<div class="swiper-slide slider1"></div>
					<div class="swiper-slide slider2"></div>
					<div class="swiper-slide slider3"></div>
				</div>
				<!-- 如果需要分页器 -->
				<div class="swiper-pagination"></div>
			</div>

			<section class="main1">
				<div class="rank">
					<div class="tp">今日排名 <span id="rankNum">6</span></div>
				</div>

				<div class="clockin">
					<div class="tp1">
						累计打卡<span id="clockNum">2</span>天
						<button type="button" id="clockBtn">今日打卡</button>
					</div>
				</div>
			</section>

			<section class="main2">
				<a href="#" class="sports-data">运动数据</a>

				<div class="badge">
					<div class="tp2">累计运动徽章
                        <span id="badgeNum">2</span> <span class="mei">枚</span> </div>
				</div>
			</section>

			<section class="main3">
				<a href="#">课程训练</a>
			</section>

			<section class="main4">
				<a href="#">户外跑步</a>
			</section>
		</main>

		<!-- 底部导航 tabbar -->
		<nav class="tabbar"></nav>
	</body>
</html>
